<?php
//본 파일은 코딩이 너무 복잡해져서 예제용 이미지 링크를 따로 빼낸 것으로써 추후에 이 파일 대신 배열로 처리된 진짜 썸네일 링크로 대체하면 된다.
?>

<!-- Sample gallery mini - Textures (Preset) -->
<div class="photo_frame image thumb_mi1_1"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a1.jpg" /></div>
<div class="photo_frame image thumb_mi1_2"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a2.jpg" /></div>
<div class="photo_frame image thumb_mi1_3"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a3.jpg" /></div>
<div class="photo_frame image thumb_mi1_4"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a4.jpg" /></div>
<div class="photo_frame image thumb_mi1_5"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a5.jpg" /></div>
<div class="photo_frame image thumb_mi1_6"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a6.jpg" /></div>
<div class="photo_frame image thumb_mi1_7"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a7.jpg" /></div>
<div class="photo_frame image thumb_mi1_8"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a8.jpg" /></div>
<div class="photo_frame image thumb_mi1_1"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a1.jpg" /></div>
<div class="photo_frame image thumb_mi1_2"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a2.jpg" /></div>
<div class="photo_frame image thumb_mi1_3"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a3.jpg" /></div>
<div class="photo_frame image thumb_mi1_4"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a4.jpg" /></div>
<div class="photo_frame image thumb_mi1_5"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a5.jpg" /></div>
<div class="photo_frame image thumb_mi1_6"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a6.jpg" /></div>
<div class="photo_frame image thumb_mi1_7"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a7.jpg" /></div>
<div class="photo_frame image thumb_mi1_8"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a8.jpg" /></div>
<div class="photo_frame image thumb_mi1_1"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a1.jpg" /></div>
<div class="photo_frame image thumb_mi1_2"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a2.jpg" /></div>
<div class="photo_frame image thumb_mi1_3"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a3.jpg" /></div>
<div class="photo_frame image thumb_mi1_4"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a4.jpg" /></div>
<div class="photo_frame image thumb_mi1_5"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a5.jpg" /></div>
<div class="photo_frame image thumb_mi1_6"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a6.jpg" /></div>
<div class="photo_frame image thumb_mi1_7"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a7.jpg" /></div>
<div class="photo_frame image thumb_mi1_8"><img data-lazy="../assets/book/editor/item_bg_pics/thumb_a8.jpg" /></div>

<!-- Thumbnail button event -->
<script type="text/javascript">
    $(document).ready(function() {
        $('.thumb_mi1_1').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a1.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a1.jpg)'});
        });
        $('.thumb_mi1_2').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a2.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a2.jpg)'});
        });
        $('.thumb_mi1_3').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a3.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a3.jpg)'});
        });
        $('.thumb_mi1_4').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a4.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a4.jpg)'});
        });
        $('.thumb_mi1_5').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a5.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a5.jpg)'});
        });
        $('.thumb_mi1_6').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a6.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a6.jpg)'});
        });
        $('.thumb_mi1_7').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a7.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a7.jpg)'});
        });
        $('.thumb_mi1_8').click(function() {
            $('.pic_inner').attr({'src': '../assets/book/editor/item_bg_pics/pic_a8.jpg'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/item_bg_pics/pic_a8.jpg)'});
        });
    });
</script>

<?php ?>